<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="down" @click="gotoLogin">剩余 {{ num }} S</div>
    <img class="myimg" :src="pic" alt="">
    <span class="spandot" v-for="(l,i) in spanNum" :key="i" :style="l"></span>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router"; //导入路由
import pic from '@/assets/images/404.png' //图片导入
let timer = null;
export default {
      name:"404",
  setup(props, context) {
    const bgstar = ref();
    let num = ref(5); //注意定义后一定要暴露
    const router = useRouter(); //路由对象
    const state = reactive({
      spanNum: [],
      pic
    });
    const gotoLogin = () => {
      //   router.push("/login");
    };

    const timeDown = () => {
      timer = setInterval(() => {
        if (num.value > 0) {
          num.value--;
        } else {
          clearInterval(timer);
          timer = null;
          gotoLogin();
        }
      }, 1000);
    };

    const spanStarInit = () => {
      const width = document.getElementById("bgstar").clientWidth;
      const height = bgstar.value.clientHeight;
      console.log(width, height);
      for (var i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;
        var scaler = Math.random() * 1.5;
        var rate = Math.random() * 2.5;

        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var b = Math.random() * 255;
        var a = Math.random(); // 透明度

        state.spanNum.push({
          top: top + "px",
          left: left + "px",
          animationDelay: rate + "s",
          transform: `scale(${scaler})`,
          background: `rgba(${r},${g},${b},${a})`,
        });
      }
    };
    onMounted(() => {
      console.log("onMounted - 组件初始化");
      timeDown();
      spanStarInit();
    });
    return {
      gotoLogin,
      bgstar,
      num,
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped >
// scope 独立的css作用域
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    :deep .el-progress__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>